1 00:00:00,400 --> 00:00:01,450 Welcome back. 2 00:00:01,450 --> 00:00:06,220 In this lecture we're going to be taking a look at UI buttons. 3 00:00:06,310 --> 00:00:10,930 We have two buttons available to us in the Roblox API. 4 00:00:10,930 --> 00:00:13,840 And those are image buttons and text buttons. 5 00:00:13,840 --> 00:00:19,090 As the name suggests you can put text in one and you can put images in the other. 6 00:00:19,090 --> 00:00:23,200 So let's go ahead and insert both of these buttons into our GUI. 7 00:00:23,200 --> 00:00:26,530 We'll add our image button as well as our text button. 8 00:00:26,980 --> 00:00:30,670 There are our buttons and their full glory. 9 00:00:31,800 --> 00:00:36,480 And what you should immediately notice right away is that as my mouse hovers over my text button, you 10 00:00:36,480 --> 00:00:39,330 can see the color changes, which is pretty cool. 11 00:00:39,330 --> 00:00:44,850 And that's because these buttons have a property, I believe, called auto button color. 12 00:00:44,880 --> 00:00:49,770 So yeah, if you look in the properties panel, these have a property called auto button color. 13 00:00:49,770 --> 00:00:54,000 And it will automatically update the color of the button when you hover over it, or you hold down your 14 00:00:54,000 --> 00:00:54,900 mouse button on it. 15 00:00:54,900 --> 00:01:01,500 If you want to be able to change or do your own kind of auto button coloring, then you would disable 16 00:01:01,500 --> 00:01:06,390 this property and listen to some of the events for the button, like when the mouse enters and leaves 17 00:01:06,390 --> 00:01:07,320 and stuff like that. 18 00:01:07,320 --> 00:01:11,040 But for the most part, again, they have basically all the same properties. 19 00:01:11,040 --> 00:01:16,320 As a normal frame, you can adjust the size, the position, the color, and of course, all of those 20 00:01:16,320 --> 00:01:19,590 UI constraints that we talked about earlier work on our buttons. 21 00:01:19,590 --> 00:01:23,970 So with our text button, we could add a gradient to the background of the button. 22 00:01:23,970 --> 00:01:31,140 If we wanted to change the color up a bit, maybe we want red to let's say a nice purple color. 23 00:01:31,140 --> 00:01:31,950 We can do that. 24 00:01:31,950 --> 00:01:33,840 There's our red to purple button. 25 00:01:33,930 --> 00:01:38,430 We can place a UI corner in here to round the edges of our button. 26 00:01:38,430 --> 00:01:41,340 There's a whole bunch of stuff we can do to stylize our buttons. 27 00:01:42,000 --> 00:01:47,430 And of course, since this is a text button, it has all of the same properties that a text label would. 28 00:01:47,430 --> 00:01:53,580 So you can change the font boldness, italicize it, change the text, the color, blah blah blah. 29 00:01:53,580 --> 00:01:56,250 All these same properties as a normal text label. 30 00:01:56,250 --> 00:02:01,650 The only difference between this and a text label is that this has some extra events to listen to when 31 00:02:01,650 --> 00:02:06,120 a player clicks on it, or they tap it with their finger on a mobile device. 32 00:02:06,120 --> 00:02:12,240 Same thing goes with an image button, has the same properties as an image label, so you can change 33 00:02:12,240 --> 00:02:13,230 the resampling mode. 34 00:02:13,230 --> 00:02:18,570 You can change the scaling type, but there is an additional option right here. 35 00:02:18,570 --> 00:02:24,960 So when a player holds down or presses down on your button, you can change the image to something different. 36 00:02:24,960 --> 00:02:26,760 That's why it's called a pressed image. 37 00:02:26,760 --> 00:02:28,260 So that's an extra option. 38 00:02:28,260 --> 00:02:28,950 You get there. 39 00:02:28,950 --> 00:02:35,190 And you also have the ability to add a different image when a player is hovering over that guy with 40 00:02:35,190 --> 00:02:35,790 their mouse. 41 00:02:35,790 --> 00:02:37,470 So that's another cool feature. 42 00:02:37,470 --> 00:02:40,170 But of course same properties as before. 43 00:02:40,170 --> 00:02:44,340 You get an auto button color property and the same properties as a frame. 44 00:02:44,640 --> 00:02:48,390 The main thing I'm interested in with these buttons are their events. 45 00:02:48,390 --> 00:02:51,390 So let's go ahead and add a local script into our screen. 46 00:02:51,390 --> 00:02:55,890 Guy no, I don't want to try I coding, leave me alone. 47 00:02:55,890 --> 00:02:58,710 We'll make a reference to our guy which is script dot parent. 48 00:02:59,770 --> 00:03:01,870 And then let's go ahead and grab one of our buttons. 49 00:03:01,870 --> 00:03:05,230 For example, let's grab our text button inside of our text button. 50 00:03:05,230 --> 00:03:10,540 We're going to have an event, for example, fired when the mouse has fully left clicked the G button. 51 00:03:10,540 --> 00:03:16,870 So this is specifically listening for when a player presses down their left click button on the text 52 00:03:16,870 --> 00:03:17,410 button. 53 00:03:17,410 --> 00:03:21,790 We have some other events that are related with instances such as destroy and stuff like that. 54 00:03:21,790 --> 00:03:27,400 Don't care about those, but I am more keen to learn about the different events specifically for these 55 00:03:27,400 --> 00:03:27,940 buttons. 56 00:03:27,940 --> 00:03:33,040 For example, the activated event states that it is fired when the button is activated. 57 00:03:33,040 --> 00:03:40,780 This is the event you want to use for listening to input on your button from multiple different devices, 58 00:03:40,780 --> 00:03:45,910 so this will work with mouses, this will work with mobile devices and this will work on console. 59 00:03:45,910 --> 00:03:49,030 So let's go ahead and actually connect a function to this event. 60 00:03:49,330 --> 00:03:56,050 And every time this text button is activated let's just print out a message saying the button was activated. 61 00:03:57,360 --> 00:04:00,000 So let's go ahead and play our game. 62 00:04:00,480 --> 00:04:02,100 Here's our beautiful button. 63 00:04:02,100 --> 00:04:07,440 And if I hover my mouse over it you can see the auto button color property is doing its job. 64 00:04:07,440 --> 00:04:09,570 And then if I click there we go. 65 00:04:09,570 --> 00:04:10,950 The button was activated. 66 00:04:10,950 --> 00:04:16,290 And I can continue to click it over and over and I can spam click it as well and print that statement 67 00:04:16,290 --> 00:04:17,940 out as many times as I want. 68 00:04:17,940 --> 00:04:21,720 But I'm clicking it every single time and we're getting a nice print statement. 69 00:04:22,550 --> 00:04:24,830 Now let's do something a little bit funny with this event. 70 00:04:24,830 --> 00:04:29,210 Let's go ahead and convert the size of my text button to scale. 71 00:04:29,210 --> 00:04:35,390 And what I'm going to do is actually let's go ahead and use a UI scale property. 72 00:04:35,390 --> 00:04:41,390 Let's actually go ahead and use this constraint every single time that my text button is activated. 73 00:04:41,780 --> 00:04:49,490 Let's go ahead and update the UI scales value, which is the scale property, lets it decrease that 74 00:04:49,490 --> 00:04:51,200 by 0.1. 75 00:04:51,200 --> 00:04:54,470 Or actually let's do 0.05 every single time we click. 76 00:04:54,470 --> 00:04:59,750 So every single time we click our button, it should get smaller and smaller and smaller. 77 00:04:59,750 --> 00:05:05,600 And then to have this button scale properly let's go ahead and set the anchor point to be in the middle 78 00:05:05,600 --> 00:05:06,200 of the button. 79 00:05:06,200 --> 00:05:08,570 So that way it's scaling from the center. 80 00:05:09,140 --> 00:05:09,440 Hold on. 81 00:05:09,440 --> 00:05:10,490 It didn't put in the middle. 82 00:05:10,490 --> 00:05:10,880 There we go. 83 00:05:10,880 --> 00:05:11,750 Now it's in the middle. 84 00:05:11,750 --> 00:05:14,120 So there's our anchor point in the center of the button. 85 00:05:14,120 --> 00:05:15,710 And let's go ahead and play test. 86 00:05:16,640 --> 00:05:19,280 And if I click my button, oh, it got smaller. 87 00:05:19,280 --> 00:05:26,540 And if I can continue to click it, it's getting smaller and smaller and smaller until, oh, eventually 88 00:05:26,540 --> 00:05:27,710 it is gone. 89 00:05:28,190 --> 00:05:30,530 Now there are some other events we can go ahead and listen to. 90 00:05:30,530 --> 00:05:35,480 For example, with our text button, we can listen for when a mouse enters or hovers over it. 91 00:05:35,480 --> 00:05:38,000 And we can also listen for when a mouse leaves. 92 00:05:38,030 --> 00:05:42,980 So these are the events we would use to override the auto button color property. 93 00:05:42,980 --> 00:05:45,440 So let's go ahead and disable that property. 94 00:05:45,440 --> 00:05:45,980 Right. 95 00:05:46,850 --> 00:05:52,520 And then when a mouse enters or hovers over our object, let's go ahead and connect a function. 96 00:05:52,550 --> 00:05:58,820 What we want to do is let's make the color darker in our guy. 97 00:05:58,820 --> 00:06:01,940 So I'm just going to get rid of the gradient for now. 98 00:06:01,940 --> 00:06:04,820 So that way we just have a normal white color here. 99 00:06:05,150 --> 00:06:09,170 And what we're going to do is we're going to get the HSV color of this object. 100 00:06:09,170 --> 00:06:12,500 So we can do g dot text button dot background color three. 101 00:06:12,500 --> 00:06:18,890 And then let's convert it to HSV, which is going to return the hue saturation and a value of a color. 102 00:06:18,890 --> 00:06:24,620 And we can take this value and alter it to change the brightness of the color. 103 00:06:24,620 --> 00:06:27,710 So let's go ahead and get those values I believe. 104 00:06:27,710 --> 00:06:28,460 What did it say. 105 00:06:28,460 --> 00:06:28,940 Return. 106 00:06:28,940 --> 00:06:31,160 First it was two HSV. 107 00:06:32,450 --> 00:06:34,940 It's not auto filling for me I don't know why. 108 00:06:34,940 --> 00:06:35,600 Hold on. 109 00:06:35,720 --> 00:06:39,260 Two HSV Hue Saturation okay. 110 00:06:41,770 --> 00:06:45,640 So we will get our hue, our saturation and then our value. 111 00:06:45,760 --> 00:06:51,580 And then let's just go ahead and decrease this value by some constant. 112 00:06:51,580 --> 00:06:54,820 Like we'll decrease it by 0.5. 113 00:06:55,660 --> 00:07:01,660 And then let's go ahead and set GUI dot text button dot background color three to be equal to a new 114 00:07:01,660 --> 00:07:04,090 color three from HSV. 115 00:07:04,270 --> 00:07:08,260 And then we can pass our hue our saturation and our new value. 116 00:07:10,220 --> 00:07:11,600 And then we'll copy this. 117 00:07:11,600 --> 00:07:17,150 And this time, when the mouse leaves the GUI, we want to restore it back to its original color. 118 00:07:17,150 --> 00:07:22,730 So this time we want to increment our value by 0.5 and then set that as the color. 119 00:07:23,490 --> 00:07:26,580 And then let me make sure yep, auto button color is disabled. 120 00:07:26,580 --> 00:07:28,890 So let's go ahead and test out to see if this works. 121 00:07:29,790 --> 00:07:32,670 If I go and hover over the button, there we go. 122 00:07:32,670 --> 00:07:35,910 It became darker and then when I leave, it's back to its default. 123 00:07:35,910 --> 00:07:40,560 So now we have overrided the auto button color with our own custom color. 124 00:07:41,600 --> 00:07:47,720 There are also some additional events relating specifically for mobile input, so you can listen for 125 00:07:47,720 --> 00:07:54,290 when it is touch tapped, when you pan across it with your finger, when a player holds down on the 126 00:07:54,290 --> 00:07:58,580 button for a long time, when they pinch it, when they swipe it, or when they try to rotate with their 127 00:07:58,580 --> 00:07:59,210 fingers. 128 00:07:59,210 --> 00:08:04,190 There's a whole bunch of different events in here that you can use specifically for mobile devices, 129 00:08:04,190 --> 00:08:10,280 but if you have a button that you simply just want to be able to click and listen for that for all devices, 130 00:08:10,280 --> 00:08:13,370 that's what you would use the activated event for. 131 00:08:13,850 --> 00:08:17,270 These same events also exist within our image button. 132 00:08:17,270 --> 00:08:19,250 So it also has an activated event. 133 00:08:19,250 --> 00:08:26,840 It also has a mouse enter event and it also has a mouse leave event as well as events like for all of 134 00:08:26,840 --> 00:08:27,800 the touches. 135 00:08:27,800 --> 00:08:31,280 And then there's some other additional events specifically for mice. 136 00:08:31,280 --> 00:08:36,350 For example, if you hold down with your mouse button or if you lift up with your mouse button, if 137 00:08:36,350 --> 00:08:38,330 you use the scroll wheel, stuff like that. 138 00:08:38,540 --> 00:08:43,340 There's a whole bunch of different events in here that you can use to basically script these UI buttons 139 00:08:43,340 --> 00:08:44,690 however you want. 140 00:08:45,230 --> 00:08:50,210 The last thing I guess we could actually take a look at is the hover, the pressed image, and then 141 00:08:50,210 --> 00:08:52,520 the image properties for our image button. 142 00:08:52,520 --> 00:08:56,960 So let's just grab some random images here like, uh, this will work. 143 00:08:56,960 --> 00:09:02,000 So we'll copy this asset ID this will be the normal image for our button. 144 00:09:02,600 --> 00:09:05,390 And then let me change the background transparency to one. 145 00:09:05,450 --> 00:09:11,270 And then if our player hovers their mouse over the button, let's change it to this face. 146 00:09:11,300 --> 00:09:12,950 So we'll paste that in there. 147 00:09:12,950 --> 00:09:19,310 And then if the player presses down on it, um, I guess we'll just set it to a troll face. 148 00:09:19,310 --> 00:09:19,880 Why not? 149 00:09:21,560 --> 00:09:25,040 If we go and hover our mouse over the button, there we go. 150 00:09:25,040 --> 00:09:26,180 We get a happy face. 151 00:09:26,180 --> 00:09:27,890 And then if we hold down. 152 00:09:30,420 --> 00:09:33,390 Actually not working, which is kind of interesting. 153 00:09:34,610 --> 00:09:37,940 Did I accidentally put the exact same image I might have? 154 00:09:37,940 --> 00:09:39,200 Let's go ahead and take a look. 155 00:09:39,500 --> 00:09:39,950 Okay. 156 00:09:39,950 --> 00:09:43,520 Yeah, I accidentally put the exact same image ID, so let me fix that. 157 00:09:43,520 --> 00:09:46,130 I thought I copied the troll face ID copy. 158 00:09:46,770 --> 00:09:48,060 Press image. 159 00:09:48,510 --> 00:09:49,290 Okay, there we go. 160 00:09:49,290 --> 00:09:50,610 It should be on the troll face now. 161 00:09:50,610 --> 00:09:51,660 Let's try that again. 162 00:09:52,430 --> 00:09:58,970 So if my mouse hovers over my object happy face, and then if I press down troll face, isn't that kind 163 00:09:58,970 --> 00:09:59,570 of neat? 164 00:10:01,120 --> 00:10:03,460 So that's all for me in this lecture. 165 00:10:03,460 --> 00:10:06,340 Thank you for watching and I'll see you in the next one.